<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
    
       
    <h:panelGroup layout="block"  id="bannersVerticales" >
        
        <script type="text/javascript">

                $(document).ready(function() {
                $('#bannerVerticalD').jsCarousel({                     
                    autoscroll:#{fn:length(catalogoBean.itemCatalogo.producto.relacionados)>3 ? 'true':'false'},                     
                    masked: false, 
                    itemstodisplay: 3, 
                    orientation: 'v' });
                
                $('#bannerVerticalI').jsCarousel({                     
                    autoscroll: #{fn:length(catalogoBean.itemCatalogo.producto.sustitutos)>3 ? 'true':'false'}, 
                    masked: false, 
                    itemstodisplay: 3, 
                    orientation: 'v' });                

            });       
        </script>       
        
        <h:panelGroup layout="block" styleClass="bannerVerticalI"
                       rendered="#{not empty catalogoBean.itemCatalogo.producto.sustitutos}">
            <div style="margin-bottom: 10px;">
            <h2>Sustitutos de</h2>
            <span style="font-size:11px; color: #333399;"><h:outputText value="#{catalogoBean.itemCatalogo.descrp}"/></span>
            </div>
            
            <div layout="block" id="bannerVerticalI" >

                <ui:repeat value="#{catalogoBean.itemCatalogo.producto.sustitutos}" var="s" >

                    <h:panelGroup layout="block" class="" rendered="#{s.productoSustituto.debaja eq 'N'}" >                

                        <p:commandLink action="#{catalogoBean.verFichaProductoFromProducto(s.productoSustituto)}"
                                            process="@this"                
                                            update="@form"
                                            oncomplete="PF('dlgSustitutos').hide();" >

                            <p:graphicImage style="width:100px; height:100px;"  value="#{aplicacionBean.parametro.pathImagenesProductos}/#{s.productoSustituto.imgchi}.jpg" />

                            <div ><h:outputText value="#{s.productoSustituto.descrp}" /></div>        

                        </p:commandLink>                

                    </h:panelGroup>
                </ui:repeat>               
            </div>

        </h:panelGroup>
       
            
        <h:panelGroup layout="block" styleClass="bannerVerticalD"
                      rendered="#{not empty catalogoBean.itemCatalogo.producto.relacionados}">
            
            <div style="margin-bottom: 10px;">
            <h2>Relacionados con</h2>
            <span style="font-size:11px; color: #333399;"><h:outputText value="#{catalogoBean.itemCatalogo.descrp}"/></span>
            </div>
                
       <div layout="block" id="bannerVerticalD" >
            
            <ui:repeat value="#{catalogoBean.itemCatalogo.producto.relacionados}" var="s" >
                
                <h:panelGroup layout="block" class="" rendered="#{s.productoRelacionado.debaja eq 'N'}" >
                
                    <p:commandLink action="#{catalogoBean.verFichaProductoFromProducto(s.productoRelacionado)}"
                                        process="@this"                
                                        update="@form"
                                        oncomplete="PF('dlgSugeridos').hide();" >
                    
                    <p:graphicImage style="width:100px; height:100px;"  value="#{aplicacionBean.parametro.pathImagenesProductos}/#{s.productoRelacionado.imgchi}.jpg" />

                    <div><h:outputText value="#{s.productoRelacionado.descrp}" /></div>

                    </p:commandLink>                
                </h:panelGroup>
                
            </ui:repeat>               
        </div>
            
        </h:panelGroup>
        
    </h:panelGroup>
        
     

</ui:composition>
